<template>
	<view class="sharewrapper" style="background-image:url('https://adminshop.12sxb.cn/uploads/sharebg.png')">

		<canvas ref="myCanvas" :style="{width:canvasW+'px' ,height:canvasH + 'px'}"  style="position:absolute;left:-9999999rpx" class="myCanvas" canvas-id="myCanvas" ></canvas>
		<view class="codewrapper">
			<view class="title">分享个人码</view>
			<view class="desc">邀请好友得收益，多邀多得</view>
			
			<view class="codeborder" id="sharecon">
				<image class="avatar" src="https://adminshop.12sxb.cn/uploads/qavatar.jpeg"></image>
				<view class="info">群聊:谷城本地生活服务群</view>
				<image class="code" :src="qrcode"></image>
				<image class="wechat" src="/static/images/wechat.jpeg"></image>
			</view>
			
			<view class="btn" @click="saveImg">保存图片</view>
			<view class="desc1">分享二维码至朋友圈，获得更多收益</view>
		</view>
		
		<view class="tongjiwrapper">
			<view class="personnum">已邀请{{shareUserList.length}}人</view>
			<view class="money">累计获得了{{shareUserList.length}}元奖励</view>
		</view>
		
		<view class="listwrapper">
			<image class="imgtit" src="/static/images/yq.png"></image>
			<view v-if="shareUserList.length > 0" class="listitem" v-for="item in shareUserList" :key="item.id">
				<image class="useravatar" :src="item.avatar"></image>
				<view class="mid">
					<view class="name">{{item.nickname}}</view>
					<view class="time">{{item.createtime}}</view>
				</view>
				<view class="desc">获得奖励<text style="color:#FF6A6A">1</text>元</view>
			</view>
		
			<view style="margin-top:10rpx;text-align: center" v-else>快去分享朋友圈得佣金吧</view>
		</view>

	
	</view>
</template>

<script>
	import config from "@/common/config/config.js"
	export default {
		data() {
			return {
				qrcode:"",
				config:config,
				canvasW:0,
				canvasH:0,
				shareUserList:[],
			}
		},
		
		onLoad(){
			this.getQrCode();
			this.getShareList();
		},
		
		methods: {
			
			getShareList(){
				let that = this;
				uni.request({
					url:'/wanlshop/user/getShareList',
					success(res){
						that.shareUserList = res.data;
					}
				})
			},
			
			
			getQrCode(){
				let that = this;
				uni.request({
					url:"/wanlshop/user/getShareQrCode",
					success(res){
						that.qrcode = that.config.cdnurl +'/'+ res.data;
					}
				})
			},
		
			async saveImg(){
				
				let systeminfo = uni.getSystemInfoSync()
				console.log(systeminfo);
				let dpi = systeminfo.devicePixelRatio;
				
				 const query = uni.createSelectorQuery().in(this);
					query.select('.codeborder').boundingClientRect(async rect => {
					this.canvasW = rect.width*dpi;
					this.canvasH = rect.height*dpi;
					await this.$nextTick();
					this.drawCanvas();
				  }).exec();

			},
			
		   async drawCanvas() {
			   
			   let systeminfo = uni.getSystemInfoSync()
			   console.log(systeminfo);
			   let dpi = systeminfo.devicePixelRatio;
			   
			  const ctx = uni.createCanvasContext('myCanvas', this);
			  
			  // 绘制背景
			  ctx.setFillStyle('#ffffff');
			  ctx.fillRect(0, 0, this.canvasW, this.canvasH);
			  let avatarpath = this.config.cdnurl+"/uploads/qavatar.jpeg";
			  console.log(avatarpath);
			  const avatarimgpath= await this.downloadImage(avatarpath);
				
		
			   ctx.drawImage(avatarimgpath, 120*dpi, 45*dpi, 50*dpi, 50*dpi);
				
			
			  
			  ctx.setFontSize(13*dpi);
			  ctx.setFillStyle('#333333');
			  
			ctx.fillText("群聊:谷城本地生活服务群", 70*dpi, 125*dpi);
			  
			 
			  
			  // 绘制图片（需先下载到本地）
			  console.log(this.qrcode);
			  const imgPath = await this.downloadImage(this.qrcode);
		
			ctx.drawImage(imgPath, 48*dpi, 135*dpi, 200*dpi, 215*dpi);
	
			 
			  
			  const wechaimg = this.config.cdnurl+"/uploads/wechat.jpeg";
			  console.log(wechaimg);
			  const wechatimgpath = await this.downloadImage(wechaimg);

				ctx.drawImage(wechatimgpath, 128*dpi, 210*dpi, 38*dpi, 38*dpi);  
	
			ctx.fillText("", 68*dpi, 318*dpi);
	
			  ctx.scale(dpi/2)
			  // 执行绘制
			  ctx.draw(false, () => {
				this.saveCanvas();
			  });
			},
			    
			saveCanvas() {
				let systeminfo = uni.getSystemInfoSync()
				console.log(systeminfo);
				let dpi = systeminfo.devicePixelRatio;
				
			  uni.canvasToTempFilePath({
				canvasId: 'myCanvas',
				x: 0,
				y: 0,
				width:this.canvasW,
				height:this.canvasH,
				destWidth: this.canvasW,
				destHeight: this.canvasH,
				success: res => {
					console.log(res);
					
				  uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: () => uni.showToast({ title: '保存成功' }),
					fail: () => uni.showToast({ title: '需授权相册权限' })
				  });
				},
				fail: err => console.error(err)
			  }, this);
			},
			    
			downloadImage(url) {
			  return new Promise((resolve) => {
				uni.getImageInfo({
				  src: url,
				  success: res => resolve(res.path),
				  fail: () => resolve(url) // 失败时尝试原始路径
				});
			  });
			}
		
		}
	}
</script>

<style lang="scss" scoped>
.sharewrapper{
	width:100%;
	min-height:100vh;
	background-size:100%;
	background-repeat: no-repeat;
	&::before{
		content:"";
		display:table
	}
	.codewrapper{
		width:686rpx;
		height:1118rpx;
		background:#fff;
		border-radius: 16rpx;
		margin:30rpx auto;
		padding:26rpx 34rpx;
		box-sizing: border-box;
		.title{
			width:260rpx;
			text-align: center;
			height:90rpx;
			font-size:50rpx;
			font-weight: bold;
			line-height: 90rpx;
			position:relative;
			margin:0 auto;
			&::after{
				content: "";
				width:230rpx;
				height:16rpx;
				background:rgba(255, 130, 130, 0.6);
				bottom:15rpx;
				left:10rpx;
				position: absolute;
			}
		}
		.desc{
			margin:0 auto;
			text-align: center;
		}
		.codeborder{
			width:618rpx;
			height:744rpx;
			margin-top:40rpx;
			border:6rpx #c7c7c7 solid;
			padding:30rpx 56rpx;
			box-sizing: border-box;
			text-align: center;
			position: relative;
			.avatar{
				width:100rpx;
				height:100rpx;
			}
			.info{
				font-size:28rpx;
				font-weight: bold;
			}
			.code{
				margin-top:20rpx;
				width:500rpx;
				height:536rpx;
			}
			.wechat{
				position:absolute;
				width:100rpx;
				height:100rpx;
				left:250rpx;
				top:379rpx;
				border-radius: 10rpx;
			}
		}
		.btn{
			width:198rpx;
			height:58rpx;
			color:#fff;
			background:#69BEFF;
			text-align: center;
			line-height: 58rpx;
			margin:30rpx auto;
			border-radius: 5rpx;
		}
		.desc1{
			color:#333;
			font-size:28rpx;
			font-weight: bold;
			text-align: center;
		}
	}
	
	.tongjiwrapper{
		width:686rpx;
		height:88rpx;
		color:#fff;
		border-radius: 6rpx;
		line-height: 88rpx;
		display:flex;
		justify-content: space-between;
		align-items: center;
		padding:0 20rpx;
		background:#FF6A6A;
		margin:0 auto;
	}
	
	.listwrapper{
		width:684rpx;
		background:#fff;
		border-radius: 10rpx;
		margin:0 auto;
		padding:30rpx;
		box-sizing: border-box;
		margin-top:30rpx;
		.imgtit{
			width:168rpx;
			height:60rpx;
		}
		.listitem{
			margin:5rpx 0  10rpx 0;
			display:flex;
			justify-content: space-between;
			align-items: center;
			.useravatar{
				width:80rpx;
				height:80rpx;
			}
			.mid{
				flex:1;
				.time{
					font-size:24rpx;
					color:#666;
				}
			}
			.desc{
				colro:#666;
			}
		}
	}
	
}
</style>
